var galleryThumbs = new Swiper('.gallery-thumbs', {
  spaceBetween: 10,
  slidesPerView: 5,
  loop: true,
  freeMode: true,
  // loopedSlides: 5, //looped slides should be the same
  on: {
    click: function() {
      $('.products_caption_picture').css('display', 'none');
    },
  },
  watchSlidesVisibility: true,
  watchSlidesProgress: true,
});
var galleryTop = new Swiper('.gallery-top', {
  // spaceBetween: 10,
  slidesPerView: 'auto',
  loop: true,
  // loopedSlides: 5, //looped slides should be the same

  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  thumbs: {
    swiper: galleryThumbs,
  },
});

$('.label-group .label').on('click', function(event) {
  $(this).addClass('active').siblings().removeClass('active')
  $('.article .article-body').eq($(this).index()).removeClass('d-none').siblings().addClass('d-none');
  
});
/**/
var vm = new Vue({
  el: "#products-caption",
  delimiters: ['${', '}'],
  data() {
    return {
      collection: 0,
      products_caption: {
        title: 'HEMNES 汉尼斯 床品四件套',
        rating: '★★★★☆',
        price: 200.00,
        original_price: 400.00,
        desc: '随着孩子长大，可调节挂衣杆和搁板的高度。 内置减震器，可使门缓慢、安静、轻柔地关闭。 镂空提手配有透明塑料底座，不但可以阻挡灰尘，还能方便看清里面的物品。',
        fit: '组合',
        component: [
          { isActive: true, color: 'red', price: 200, src: 'images/news-page-img1.jpg' },
          { isActive: false, color: 'blue', price: 300, src: 'images/news-page-img1.jpg' },
          { isActive: false, color: 'green', price: 400, src: 'images/news-page-img1.jpg' },
          { isActive: false, color: 'yellow', price: 500, src: 'images/news-page-img1.jpg' },
        ],
        color_classification: [
          { isActive: true, color: 'red', label: '红色' },
          { isActive: false, color: 'blue', label: '蓝色' },
          { isActive: false, color: 'green', label: '绿色' },
          { isActive: false, color: 'yellow', label: '卡其色' },
        ],
        service: '送货入户并安装',
        number: 1,
      }
    };
  },
  methods: {
    clickComponent(item) {
      this.products_caption.component.forEach(el => el.isActive = false)
      let isActive = item.isActive;
      item.isActive = !isActive;
      this.products_caption.price = item.price
      $('.products_caption_picture').css({ 'background-image': 'url(' + item.src + ')', 'display': 'block' });
    },
    clickColorGroup(item) {
      this.products_caption.color_classification.forEach(el => el.isActive = false)
      let isActive = item.isActive;
      item.isActive = !isActive;
      // this.products_caption.price=item.price
      // $('.products_caption_picture').css({'background-image': 'url('+item.src+')', 'display': 'block'});
    },
    clickCollection() {
      this.collection = !this.collection
    }
  }

})